<template>
  <div class="page10" v-loading="loading">
    <div class="page-title">协议系统收入计划</div>
    <div class="tableBox" style="margin-top: 20px">
      <el-table
        :data="tableData"
        style="width: 100%;"
        class="tableTh28"
        border
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
      >
        <el-table-column 
          v-for="item in columns" 
          :key="item.prop" 
          :label="item.label" 
          :prop="item.prop" 
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return {
      loading: false,
      tableData: [],
      columns: [],
      
      headerCellStyle: {
        fontSize: `14px`,
        fontWeight: '600',
        color: '#000',
        backgroundColor: '#fff',
        height: '30px',
        padding: '0'
      },
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPage10(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { data, heads, keys } = res.content;
            this.columns = keys.map((prop, i) => {
              return { 
                prop,
                label: heads[i]
              }
            });
            this.tableData = data;
          }
          this.loading = false;
        },
        err => { 
          this.loading = false;
        }
      )
    },
    cellStyle({ row }){
      if(row.areaName === '全省' || row.areaName === '浙江'){
        return {
          backgroundColor: 'rgb(255,192,0)'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import url("./style/table.scss");
.page10 {
  padding: 20px 10px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
}
</style>